import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

/*
    自定义左侧菜单栏：点击菜单图标 弹出对应左侧页面 类似vscode
    依赖的组件：ImageBtn.qml
*/
Item {
    id: leftSideMenuBar
    width: menuRect.width + stackLayout.width
    height: 200

    signal actionErrorTips1(var tips)

    property real menuBarWidth: 50
    property real menuItemWidth: 200
    property color menuBackColor: "#24292e"
    property color textColor: "#e1e4e8"

    property int layoutIndex: 255

    function showHoverTips(x, y, text) {
        hoverTips.x = x
        hoverTips.y = y
        hoverTips.visible = true
        hoverTipsText.text = text
    }

    function hideHoverTips() {
        hoverTips.visible = false
    }

    function setHoverIcon(index) {
        switch(index) {
            case 0: connectMenuBtn.ibUrl = "qrc:/imgs/connect_h.png"; break;
//            case 1: editMenuBtn.ibUrl = "qrc:/imgs/edit_hxxx.png"; break;
        }
    }

    function setBaseIcon(index) {
        switch(index) {
            case 0: connectMenuBtn.ibUrl = "qrc:/imgs/connect_b.png"; break;
//            case 1: editMenuBtn.ibUrl = "qrc:/imgs/edit_bxxx.png"; break;
        }
    }

    function showChooseRect(y) {
        chooseRect.y = y
        chooseRect.color = "#f9826c"
    }

    function hideChooseRect() {
        chooseRect.color = "transparent"
    }

    MouseArea {
        anchors.fill: parent

        onClicked: {
            focus = true
        }
    }

    // 菜单区
    Rectangle {
        id: menuRect
        width: menuBarWidth
        height: parent.height
        color: menuBackColor

        Column {
            id: menuColumn
            anchors.fill: parent
            spacing: 2

            ImageBtn {
                id: connectMenuBtn
                width: parent.width
                height: width
                ibUrl: "qrc:/imgs/connect_b.png"
                ibBackColor: menuBackColor
                ibHoverColor: menuBackColor
                ibImgMarginWidth: 12
                ibImgMarginHeight: 12

                onEntered: {
                    setHoverIcon(0)
                    showHoverTips(parent.width + 5, y + height / 2 - hoverTips.height / 2, "连接设备")
                }

                onExited: {
                    if(layoutIndex != 0 || layoutIndex === 255) {
                        setBaseIcon(0)
                    }
                    hideHoverTips()
                }

                onClicked: {
                    focus = true
                    hideHoverTips()
                    if(layoutIndex === 0) {
                        stackLayout.visible = !stackLayout.visible
                        hideChooseRect()
                        layoutIndex = 255
                    } else {
                        stackLayout.visible = true
                        setBaseIcon(1)
                        showChooseRect(y)
                        layoutIndex = 0
                    }
                }
            }

//            ImageBtn {
//                id: editMenuBtn
//                width: parent.width
//                height: width
//                ibUrl: "qrc:/imgs/edit_bxxx.png"
//                ibBackColor: menuBackColor
//                ibHoverColor: menuBackColor
//                ibImgMarginWidth: 10
//                ibImgMarginHeight: 10

//                onEntered: {
//                    setHoverIcon(1)
//                    showHoverTips(parent.width + 5, y + height / 2 - hoverTips.height / 2, "配置参数")
//                }

//                onExited: {
//                    if((layoutIndex != 1) || (layoutIndex === 255)) {
//                        setBaseIcon(1)
//                    }
//                    hideHoverTips()
//                }

//                onClicked: {
//                    hideHoverTips()
//                    if(layoutIndex === 1) {
//                        stackLayout.visible = !stackLayout.visible
//                        hideChooseRect()
//                        layoutIndex = 255
//                    } else {
//                        stackLayout.visible = true
//                        setBaseIcon(0)
//                        showChooseRect(y)
//                        layoutIndex = 1
//                    }
//                }
//            }
        }
        // 选中项颜色框
        Rectangle {
            id: chooseRect
            width: 4
            height: parent.width
            color: "transparent"
        }
    }
    // 悬停提示消息
    Rectangle {
        id: hoverTips
        width: hoverTipsText.width + hoverTipsText.x * 2
        height: hoverTipsText.height + hoverTipsText.y * 2
        radius: 4
        visible: false
        color: "#1f2428"
        border.width: 1
        border.color: "#454545"
        z: 3

        Text {
            id: hoverTipsText
            x: 3
            y: 2
            text: qsTr("text")
            color: "#d1d5da"
            font.pixelSize: 13
        }
    }

    // 弹出页面
    StackLayout {
        id: stackLayout
        width: 0
        height: parent.height
        anchors.left: menuRect.right
        currentIndex: layoutIndex
        visible: false
        z: 1

        onVisibleChanged: {
            if(visible) width = menuItemWidth
            else width = 0
        }

        SerialConnectView {
            id: serialConnectView
            width: parent.width
            height: parent.height
            color: "#1f2428"
            z: 2

            onActionErrorTips: function(tips) {
                actionErrorTips1(tips)
            }
        }

        Rectangle {
            id: editRect
            width: parent.width
            height: parent.height
            color: "#1f2428"
            z: 2

        }
    }
}
